<template>
	<div>
		<input type="text" placeholder="请输入搜索内容" v-model="keyValue" />
		<ButtonCounter />
		<ButtonCounter />
		<ul>
			<li v-for="good in goodsList" :key="good.id">
				<img :src="good.picture" alt="pic" class="good_img" />
				<h3>{{ good.product }}</h3>
				<p>{{ good.price }}</p>
			</li>
		</ul>
	</div>
</template>

<script setup>
import { ref, watch } from 'vue'
import axios from 'axios'
import ButtonCounter from '@/components/ButtonCounter.vue'

const keyValue = ref('') //搜索关键字

const goodsList = ref([]) //搜索数据

/**
 * 自动搜索入口
 */
watch(keyValue, async newValue => {
	// 根据搜索关键字调用后端搜索接口
	console.log('newValue ', newValue)
	// 调用网络接口 axios库
	// 1. npm install axios 安装axios
	// 2. 引入  import axios from 'axios'
	// 3. axios({
	//        url:''
	//        method:'GET',
	//        data:{}
	//   }).then(data=>{})

	const res = await axios({
		method: 'GET',
		url: 'http://47.109.74.84:8089/api/shop/search',
		params: {
			keyword: newValue,
		},
	})

	goodsList.value = res.data.resultInfo.list
	console.log('goodsList ', goodsList.value)
})
</script>

<style lang="css" scoped>
.good_img {
	width: 100px;
	height: 100px;
}
</style>
